<template>
  <div class="search-history">
    <!-- 搜索历史 -->
    <van-cell title="搜索历史" icon="bulb-o">
      <span v-if="isEdit">
        <span @click="searchHistories.splice(0)">全部删除 &nbsp;</span>
        <span @click="isEdit = false">完成</span>
      </span>
      <van-icon v-else name="delete" @click="isEdit = true"></van-icon>
    </van-cell>
    <van-cell
      v-for="(item, index) in searchHistories"
      :key="item"
      @click="historyClick(item, index)"
      :title="item"
    >
      <van-icon v-if="isEdit" name="close" />
    </van-cell>

    <!-- 热门搜索 -->
    <van-cell title="热门搜索" icon="fire-o" />
    <van-cell
      v-for="(item, index) in hotSearch"
      :key="index"
      :title="item.keyword"
      :style="{ color: item.is_hot === 1 ? 'red' : '' }"
      @click="$emit('search', item.keyword)"
    />
  </div>
</template>

<script>
import { getSearchData } from '@/api/han/search.js'
export default {
  name: 'searchHistory',
  data() {
    return {
      hotSearch: [],
      isEdit: false, // 是否处于编辑状态
    }
  },
  props: {
    searchHistories: {
      type: Array,
    },
  },
  methods: {
    async getSearchInfo() {
      let { data } = await getSearchData()
      console.log(data)
      this.hotSearch = data.data.hotKeywordList
    },
    historyClick(val, idx) {
      // 判断是否处于编辑状态
      if (this.isEdit) {
        // 处于=> 进行编辑操作
        this.searchHistories.splice(idx, 1)
      } else {
        // 否：将历史记录放入输入框，显示搜索结果
        this.$emit('search', val)
      }
    },
  },
  created() {
    this.getSearchInfo()
  },
}
</script>

<style></style>
